{% extends "base.html" %}

{% block title %}用户登录{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-5">
            <div class="card fade-in-up">
                <div class="card-body p-5">
                    <div class="text-center mb-4">
                        <div class="float-animation">
                            <i class="bi bi-person-circle" style="font-size: 5rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;"></i>
                        </div>
                        <h3 class="mt-3 mb-2 fw-bold">用户登录</h3>
                        <p class="text-muted">请输入您的登录凭据</p>
                    </div>

                    <form method="post">
                        <div class="mb-4">
                            <label for="username" class="form-label">
                                <i class="bi bi-person me-2 text-primary"></i>用户名
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-person"></i>
                                </span>
                                <input type="text" class="form-control" id="username" name="username" required placeholder="请输入用户名">
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label">
                                <i class="bi bi-lock me-2 text-primary"></i>密码
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-lock"></i>
                                </span>
                                <input type="password" class="form-control" id="password" name="password" required placeholder="请输入密码">
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 py-3 mb-4">
                            <i class="bi bi-box-arrow-in-right me-2"></i>登录系统
                        </button>
                    </form>

                    <div class="border-top pt-4">
                        <h6 class="text-center text-muted mb-4">
                            <i class="bi bi-info-circle me-2"></i>测试账号信息
                        </h6>
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="card bg-light border-0 h-100">
                                    <div class="card-body p-3 text-center">
                                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <i class="bi bi-person-gear"></i>
                                        </div>
                                        <h6 class="card-title mb-2 fw-bold">管理员</h6>
                                        <p class="card-text small mb-1">
                                            <i class="bi bi-person me-1"></i><code>admin</code>
                                        </p>
                                        <p class="card-text small text-muted">
                                            <i class="bi bi-key me-1"></i><code>admin123</code>
                                        </p>
                                        <button class="btn btn-outline-primary btn-sm w-100" onclick="quickLogin('admin', 'admin123')">
                                            <i class="bi bi-lightning me-1"></i>快速登录
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card bg-light border-0 h-100">
                                    <div class="card-body p-3 text-center">
                                        <div class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <i class="bi bi-person"></i>
                                        </div>
                                        <h6 class="card-title mb-2 fw-bold">普通用户</h6>
                                        <p class="card-text small mb-1">
                                            <i class="bi bi-person me-1"></i><code>user</code>
                                        </p>
                                        <p class="card-text small text-muted">
                                            <i class="bi bi-key me-1"></i><code>user123</code>
                                        </p>
                                        <button class="btn btn-outline-secondary btn-sm w-100" onclick="quickLogin('user', 'user123')">
                                            <i class="bi bi-lightning me-1"></i>快速登录
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function quickLogin(username, password) {
    document.getElementById('username').value = username;
    document.getElementById('password').value = password;
    
    // 添加视觉反馈
    const usernameField = document.getElementById('username');
    const passwordField = document.getElementById('password');
    
    usernameField.classList.add('border-success');
    passwordField.classList.add('border-success');
    
    setTimeout(() => {
        usernameField.classList.remove('border-success');
        passwordField.classList.remove('border-success');
    }, 1000);
    
    showToast(`已填入${username === 'admin' ? '管理员' : '普通用户'}账号信息`, 'success');
}
</script>
{% endblock %}
